<template>
  <view class="order-evaluate">
    <view class="evaluate-goods">
      <el-image :src="orderGoods.goodsImage" mode="aspectFill" class="goods-image"></el-image>
      <view class="goods-info">
        <view class="goods-name">{{ orderGoods.goodsName }}</view>
        <view class="goods-spec">{{ orderGoods.goodsSpec }}</view>
        <view class="goods-price">¥{{ orderGoods.goodsPrice }}</view>
      </view>
    </view>
    
    <view class="evaluate-form">
      <view class="form-item score-item">
        <view class="item-label">商品评分</view>
        <el-rate v-model="score" :max="5" show-text text-color="#ff9800" 
                :texts="['非常差', '差', '一般', '好', '非常好']"></el-rate>
      </view>
      
      <view class="form-item content-item">
        <view class="item-label">评价内容</view>
        <el-textarea v-model="content" placeholder="请分享您的使用体验" 
                     :rows="4" show-word-limit :maxlength="500"></el-textarea>
      </view>
      
      <view class="form-item images-item">
        <view class="item-label">上传图片</view>
        <view class="upload-images">
          <view class="upload-btn" @click="chooseImage" v-if="images.length < 5">
            <el-icon name="plus"></el-icon>
          </view>
          <view class="image-item" v-for="(image, index) in images" :key="index">
            <el-image :src="image" mode="aspectFill"></el-image>
            <el-icon name="delete" @click="deleteImage(index)"></el-icon>
          </view>
        </view>
      </view>
      
      <view class="form-item anonymous-item">
        <el-checkbox v-model="isAnonymous">匿名评价</el-checkbox>
      </view>
    </view>
    
    <el-button type="primary" class="submit-btn" @click="submitEvaluate">提交评价</el-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      orderGoodsId: '',
      orderGoods: {},
      score: 5,
      content: '',
      images: [],
      isAnonymous: false
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.orderGoodsId = options.orderGoodsId
    this.getOrderGoodsInfo()
  },
  methods: {
    async getOrderGoodsInfo() {
      try {
        const res = await this.$api.get(`/order/goods/detail/${this.orderGoodsId}`)
        this.orderGoods = res
      } catch (error) {
        this.$toast.fail(error.message || '获取商品信息失败')
      }
    },
    chooseImage() {
      const count = 5 - this.images.length
      
      uni.chooseImage({
        count,
        success: (res) => {
          this.images = [...this.images, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.images.splice(index, 1)
    },
    async submitEvaluate() {
      if (!this.content.trim()) {
        this.$toast('请输入评价内容')
        return
      }
      
      try {
        // 上传图片
        const imageUrls = []
        for (const image of this.images) {
          const res = await this.$api.uploadFile('/evaluate/upload', image)
          imageUrls.push(res.url)
        }
        
        // 提交评价
        const evaluateData = {
          orderId: this.orderId,
          orderGoodsId: this.orderGoodsId,
          score: this.score,
          content: this.content,
          images: imageUrls,
          isAnonymous: this.isAnonymous
        }
        
        await this.$api.post('/evaluate/submit', evaluateData)
        
        this.$toast.success('评价提交成功，感谢您的反馈！')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        this.$toast.fail(error.message || '提交失败，请稍后再试')
      }
    }
  }
}
</script>

<style>
.order-evaluate {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 70px;
}
.evaluate-goods {
  background-color: #fff;
  display: flex;
  padding: 15px;
  margin-bottom: 15px;
}
.goods-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}
.goods-info {
  flex: 1;
}
.goods-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.goods-spec {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}
.goods-price {
  font-size: 14px;
  color: #f56c6c;
  font-weight: bold;
}
.evaluate-form {
  background-color: #fff;
  margin-bottom: 15px;
}
.form-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.form-item:last-child {
  border-bottom: none;
}
.item-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.score-item .item-label, .images-item .item-label, .anonymous-item .item-label {
  margin-bottom: 0;
}
.upload-images {
  display: flex;
  flex-wrap: wrap;
}
.upload-btn {
  width: 80px;
  height: 80px;
  border: 1px dashed #eee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  margin-right: 10px;
  margin-bottom: 10px;
}
.image-item {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}
.image-item image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.image-item .el-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
}
.submit-btn {
  position: fixed;
  bottom: 15px;
  left: 15px;
  right: 15px;
  height: 45px;
  line-height: 45px;
  border-radius: 22.5px;
}
</style>    